// 渲染分类列表
U.addLoad(async function () {
  //城市
  let city = $("main .row").eq(0).find(".right ul");
  let str = '<li><a class="active">不限</a></li>';
  let data = await myAjax({ url: "http://localhost:3000/api/areas" });
  let listData = data.result.result;
  $(listData).each(function (index, item) {
    str += `<li><a>${item.area_name}</a></li>`;
  });
  city.html(str);
  //年级
  let grade = $("main .row").eq(1).find(".right ul");
  let str1 = '<li><a class="active">不限</a></li>';
  let data1 = await myAjax({ url: "http://localhost:3000/api/grades" });
  let gradeData = data1.result.result;
  // console.log(gradeData);
  $(gradeData).each(function (index, item) {
    str1 += `<li><a>${item.grade_name}</a></li>`;
  });
  grade.html(str1);
  //学科
  let subject = $("main .row").eq(2).find(".right ul");
  let str2 = '<li><a class="active">不限</a></li>';
  let data2 = await myAjax({ url: "http://localhost:3000/api/subjects" });
  let subjectData = data2.result.result;
  // console.log(subjectData);
  $(subjectData).each(function (index, item) {
    str2 += `<li><a>${item.subject_name}</a></li>`;
  });
  subject.html(str2);
  // 类别
  let category = $("main .row").eq(3).find(".right ul");
  let str3 = '<li><a class="active">不限</a></li>';
  let data3 = await myAjax({ url: "http://localhost:3000/api/category" });
  let categoryData = data3.result.result;
  // console.log(categoryData);
  $(categoryData).each(function (index, item) {
    str3 += `<li><a>${item.category_name}</a></li>`;
  });
  category.html(str3);

  
});

U.addLoad(function () {
  //课程列表渲染
  let area = ''
  let grade = ''
  let subject = ''
  let category = ''
  let course = $(".lesson ul");
  var pageNum = $(".pageNum");
  init(1);
  async function init(page, area, grade, subject, category) {
    if (!area || area == "不限") {
      area = "";
    }
    if (!grade || grade == "不限") {
      grade = "";
    }
    if (!subject || subject == "不限") {
      subject = "";
    }
    if (!category || category == "不限") {
      category = "";
    }
    let c_data = await myAjax({
      url: `http://localhost:3000/api/courses?page=${page}`,
      data: {
        area: area,
        grade: grade,
        subject: subject,
        category: category,
      },
    }); //获取数据
    console.log(c_data.result.result);
    course_data = c_data.result.result; //获取结果
    page = course_data.page; //页码
    let pageTotal = course_data.pageTotal; //获取的总页数
    showView(course_data);
    showPage(page, pageTotal);
  }

  function showView(data) {
    let str4 = "";
    $(data.data).each(function (index, item) {
      str4 += `<li _src='${item.cid}'>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">${item.price}元</div>
                    </div>
                </li>`;
    });
    course.html(str4);
  }
  function fn() {
    let a = $(".row li a");
    let arr = [];
    a.each(function (index, item) {
      if ($(item).hasClass("active")) {
        arr.push($(item).text());
      }
    });
    return arr;
  }
  function showPage(page, pageTotal) {
    let str5 = "";
    str5 += `<button class="${page === 1 ? "" : "active"}">上一页</button>
                    <ul>`;
    for (var i = 1; i <= pageTotal; i++) {
      if (i === page) {
        str5 += `<li class="active">${i}</li>`;
      } else {
        str5 += `<li>${i}</li>`;
      }
    }
    str5 += `</ul>
                    <button class="${
                      page == pageTotal ? "" : "active"
                    }">下一页</button>`;
    pageNum.html(str5);

    //   点击分页
    var ul = pageNum.find("ul");
    var btn = pageNum.find("button");
    ul.on("click", "li", function (ev) {
      if (U.hasClass(this, "active")) {
        return;
      }
      init($(this).html() / 1, area, grade, subject, category);
    });
    //点击下一页
    var ul = pageNum.find("ul");
    var btn = pageNum.find("button");
    // 上一页
    btn.eq(0).click(async function () {
      let str = "";
      if (U.hasClass(this, "active")) {
        page--;
        init(page, area, grade, subject, category);
      }
    });
    //   下一页
    btn.eq(1).click(function () {
      if (U.hasClass(this, "active")) {
        page++;
        init(page, area, grade, subject, category);
      }
    });
  }

  // 渲染城市分页内容
  let fenlei = $(".row").eq(0);
  fenlei.on("click", "li", function () {
    fenlei.find("a").removeClass("active");
    $(this).children().addClass("active");
    arr = fn();
    area = arr[0];
    grade = arr[1];
    subject = arr[2];
    category = arr[3];
    init(1, area, grade, subject, category);
  });

  let nianji = $(".row").eq(1);
  nianji.on("click", "li", function () {
    nianji.find("a").removeClass("active");
    $(this).children().addClass("active");
    arr = fn();
    area = arr[0];
    grade = arr[1];
    subject = arr[2];
    category = arr[3];
    init(1, area, grade, subject, category);
  });

  let xueke = $(".row").eq(2);
  xueke.on("click", "li", function () {
    xueke.find("a").removeClass("active");
    $(this).children().addClass("active");
    arr = fn();
    area = arr[0];
    grade = arr[1];
    subject = arr[2];
    category = arr[3];
    init(1, area, grade, subject, category);
  });

  let leibie = $(".row").eq(3);
  leibie.on("click", "li", function () {
    leibie.find("a").removeClass("active");
    $(this).children().addClass("active");
    arr = fn();
    area = arr[0];
    grade = arr[1];
    subject = arr[2];
    category = arr[3];
    init(1, area, grade, subject, category);
  });
})


U.addLoad(function () {
  let lesson = $(".lesson");
  lesson.on("click", "li", function () {
    let id = $(this).attr("_src");
    location.href = "http://127.0.0.1:5501/pages/videoDetail.html?cid=" + id;
  });
});
